<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta author="zjaaa">
    <title>Document</title>
    <style>
        
        #app {
            margin: 0 auto;
            width: 100%;
        }

        input[type="number"] {
            width: 60px;
        }

        input[type="text"] {
            width: 60px;
        }

        h1 {
            text-align: center;
        }

        h2 {
            text-align: center;

        }

        h3 {
            text-align: center;
        }

        h4 {
            text-align: center;
        }

        svg {
            margin-top: 50px;
    
        }
        .main{
            margin-top: 50px;
            width: 100%;
        }

        table{
            width: 300px;
            text-align: center;
            margin: 0 auto;
        }
    

        .l{
            width: 600px;
            height: 150px;
            float: left;
            margin-left: 100px;
            margin-top: 50px;
       
        }
        .r{
            width:700px;
            float: right;
            margin-right: 80px;
        }
        .cf{
            clear: both;
        }

        .top{
            width:1000px;
            margin: 0 auto;
        }

        /* 源码显示 */
       pre{
           border-radius: 15px;
           overflow-x: scroll;
       }

        .source{
            width: 700px;
            height: 700px;
            margin: 0 auto;
        }
        
        table{
            border-collapse: collapse;
            width: 600px;
        }
        th{
            color: #fff;
            background-color: #333;
        }
        tr{
            width: 100%;
            height: 60px;
        }
        td{
            width: 160px;
        }
        tr:nth-child(even){
            background-color: #f2f2f2;
        }

   
    </style>
</head>

<body>
    <div id="app">

        <!-- top -->
        <div class="top">
            <div class="control">数组长度:
                <input type="number" id="num">
                <input type="button" value="随机生成数组" id="getArr">
                <select id="order">
                    <option value="">升序</option>
                    <option value="">降序</option>
                </select>
                <select id="select">
                    <option value="">希尔排序</option>
                    <option value="">冒泡排序</option>
                    <option value="">插入排序</option>
                    <option value="">选择排序</option>
                    <option value="">快速排序</option>
                </select>
                动画时间间隔(ms):
                <input type="text" id="deley" value="1000">
                <input type="button" value="开始排序" id="button">
                <input type="button" id="compare" value="点击比较全部算法效率">
                <input type="button" id="viewSource" value="查看当前算法源码">
            </div>
        </div>
        <!-- main -->
        <div class="main">
                  <!-- 可能会含代码解释说明 -->
            <div class="l commentBox">
                <h1></h1>
                <h2></h2>
                <h3></h3>
                <h4></h4>
              
                <table border="=1" >
                    
                </table>
        
      
            </div>
            <div class="r">
                <svg width="700" height="600"></svg>
            </div>
            <div class="cf"></div>
        </div>
        <!-- < &lt   &gt> -->
        <!-- display none 隐藏元素以及布局 -->
        <!-- visibility hiiden 隐藏元素 布局仍然停留 -->
        <div class="source" style="display: none;">
            <h1>以下为源码展示</h1>
            <pre class="shellSortSource" style="display: none;"><code class="language-javascript line-numbers"  >
    // 希尔排序
    function shellSort(arr, order, showSort) {
        let gap = Math.floor(arr.length / 2);
        while (gap > 0) {
            for (let i = gap; i &lt arr.length; i++) {
                for (let j = i - gap; j >= 0; j -= gap) {
                    if (showSort != null) {
                        showSort(arr, j, j + gap)
                    }
                    if (arr[j + gap] * order &lt arr[j] * order) {
                        let temp = arr[j + gap];
                        arr[j + gap] = arr[j];
                        arr[j] = temp;
                        if (showSort != null) {
                            showSort(arr, j, j + gap)
                        }
                    }
                }
            }
            gap = Math.floor(gap / 2);
        }
    }
                    </code></pre>
            <pre class='bubbleSortSource line-numbers' style="display:none"><code  class="language-javascript">
      // 冒泡排序
      function bubbleSort(arr, order, showSort) {
          for (let i = 1; i &lt arr.length; i++) {
              let flag = 0;
              for (let j = 0; j &lt arr.length - i; j++) {
                  if (showSort != null) {
                      showSort(arr, j, j + 1);
                  }
                  if (arr[j] * order > arr[j + 1] * order) {
                      let temp = arr[j + 1];
                      arr[j + 1] = arr[j];
                      arr[j] = temp;
                      flag = 1;
                  }
                  if (showSort != null) {
                      showSort(arr, j, j + 1);
                  }
              }
              if(flag == 0){
                  break;
              }
          
          }
      }
                        </code>
                    </pre>
            <pre class="insertSortSource" style="display: none;"><code  class="language-javascript line-numbers">
      // 插入排序
      function insertSort(arr, order, showSort) {
          for (let i = 1; i & lt arr.length; i++) {
              let temp = arr[i];
              for (var j = i - 1; j >= 0; j--) {
                  if (showSort != null) {
                      showSort(arr, i);
                  }
                  if (temp * order & lt arr[j] * order) {
                      arr[j + 1] = arr[j]
                      if (showSort != null) {
                          showSort(arr, i);
                      }
                  } else {
                      break;
                  }
              }
              arr[j + 1] = temp;
              if (showSort != null) {
                  showSort(arr, j + 1);
              }
      
          }
      }
                        </code>
                    </pre>
            <pre class="selectSortSource" style="display: none;"><code  class="language-javascript line-numbers">                //  选择排序
          function selectSort(arr, order, showSort) {
              for (let i = 0; i & lt arr.length; i++) {
                  let index = i;
                  for (let j = i + 1; j & lt arr.length; j++) {
                      if (showSort != null) {
                          showSort(arr, index, i);
                      }
                      if (arr[index] * order > arr[j] * order) {
                          index = j;
                      }
                  }
                  let temp = arr[i];
                  arr[i] = arr[index];
                  arr[index] = temp;
                  if (showSort != null) {
                      showSort(arr, i, index);
                  }
              }
          }</code></pre>
            <pre class="quickSortSource" style="display: none;"><code  class="language-javascript line-numbers">
//  快速排序
var quickSort = function (arr, order, showSort) {
    // 快速排序
    var quick = function (arr, first, end) {
        if (first &lt end) {
            let i = first, j = end, temp = 0;
            // 一个循环完成一趟扫描
            while (i &lt j) {
                while (i &lt j && order * arr[i] &lt order * arr[j]) {
                    if (showSort != null) {
                        showSort(arr, i, j, quickSort, 5);
                    }
                    j--;
                }
                if (i &lt j) {
                    if (showSort != null) {
                        showSort(arr, i, j, quickSort, 5);
                    }
                    temp = arr[i];
                    arr[i] = arr[j];
                    arr[j] = temp;
                    if (showSort != null) {
                        // 指针元素交换
                        showSort(arr, i, j, quickSort, 7);
                    }
                    i++;
                }
                while (i &lt j && order * arr[i] &lt order * arr[j]) {
                    if (showSort != null) {
                        showSort(arr, i, j, quickSort);
                    }
                    i++;
                }
                if (i &lt j) {
                    if (showSort != null) {
                        showSort(arr, i, j, quickSort, 6);
                    }
                    temp = arr[i];
                    arr[i] = arr[j];
                    arr[j] = temp;
                    if (showSort != null) {
                        showSort(arr, i, j, quickSort, 7);
                    }
                    j--;
                }
            }
            if (showSort != null) {
                showSort(arr, i, i, quickSort, 8);
            }
            quick(arr, first, i - 1);
            quick(arr, i + 1, end);
        }
        return arr;
    }

    return quick(arr, 0, arr.length - 1);
}</code></pre>

        </div>
    </div>
    <script>

    </script>
    <script src="./js/index.js"></script>
    <script src="./js/prism.js"></script>
    <link rel="stylesheet" href="./css/prism.css">
</body>

</html>